<template>
  <div class="mainbody">
    <dv-loading v-show="runFlag" class="loading">Loading...</dv-loading>
    <div class="container">
      <MainTitle :main-title="mainTitle" />
      <!-- <el-date-picker
        v-model="selectYear"
        class="year-style"
        type="year"
        value-format="yyyy"
        format="yyyy"
        placeholder="选择年份"
        @change="init(value)"
      /> -->

      <el-date-picker
        v-model="selectYear"
        type="year"
        placeholder="选择年份"
        autocomplete="off"
        value-format="yyyy"
        format="yyyy"
        class="year-style"
        @change="changeDate($event)"
      />
      <div class="main-frame">
        <div class="sub-title">
          能源单价<el-button
            class="save"
            type="primary"
            @click="setEmsEnergyPrice()"
            >保存</el-button
          >
        </div>
        <div class="price">
          <div class="price-item">
            <div class="price-name">电</div>
            <div class="price-value">
              <input v-model="elecPrice" type="text" />
            </div>
          </div>
          <div class="price-item">
            <div class="price-name">水</div>
            <div class="price-value">
              <input v-model="waterPrice" type="text" />
            </div>
          </div>
          <div class="price-item">
            <div class="price-name">气</div>
            <div class="price-value">
              <input v-model="gasPrice" type="text" />
            </div>
          </div>
        </div>
        <div class="sub-title">
          能源费用预算<el-button
            class="save"
            type="primary"
            @click="setKpiEnergyBudge()"
            >保存</el-button
          >
        </div>
        <div class="button-group">
          <el-button
            :class="[
              'system-button',
              currentSystem === 'elec' ? 'system-button-selected' : '',
            ]"
            type="primary"
            @click="getKpiEnergyBudge('elec')"
            >电</el-button
          >
          <el-button
            :class="[
              'system-button',
              currentSystem === 'water' ? 'system-button-selected' : '',
            ]"
            type="primary"
            @click="getKpiEnergyBudge('water')"
            >水</el-button
          >
          <el-button
            :class="[
              'system-button',
              currentSystem === 'gas' ? 'system-button-selected' : '',
            ]"
            type="primary"
            @click="getKpiEnergyBudge('gas')"
            >气</el-button
          >
        </div>
        <table>
          <thead>
            <td colspan="2" />
            <td v-for="(item, index) of month" :key="index">{{ item }}</td>
          </thead>
          <tr style="background: rgba(97, 169, 242, 0.5)">
            <td colspan="2">动力费预算</td>
            <td v-for="(item, index) of budgetlist" :key="index">
              <input type="number" :value="item" class="budg" />
            </td>
          </tr>
          <tr style="background: rgba(88, 138, 250, 0.5)">
            <td rowspan="5">占比</td>
            <td>Array厂</td>
            <td v-for="(item, index) of arraylist" :key="index">
              <input type="number" :value="item * 100" class="arr" />%
            </td>
          </tr>
          <tr style="background: rgba(97, 169, 242, 0.5)">
            <td>模组厂</td>
            <td v-for="(item, index) of modellist" :key="index">
              <input type="number" :value="item * 100" class="model" />%
            </td>
          </tr>
          <tr style="background: rgba(88, 138, 250, 0.5)">
            <td>EL厂</td>
            <td v-for="(item, index) of ELlist" :key="index">
              <input type="number" :value="item * 100" class="EL" />%
            </td>
          </tr>
          <tr style="background: rgba(97, 169, 242, 0.5)">
            <td>开发中心</td>
            <td v-for="(item, index) of centerlist" :key="index">
              <input type="number" :value="item * 100" class="center" />%
            </td>
          </tr>
          <tr style="background: rgba(88, 138, 250, 0.5)">
            <td>生活</td>
            <td v-for="(item, index) of adminList" :key="index">
              <input type="number" :value="item * 100" class="admin" />%
            </td>
          </tr>
        </table>
        <div class="sub-title">
          产能目标<el-button
            class="save"
            type="primary"
            @click="setEmsKpiYield()"
            >保存</el-button
          >
        </div>
        <table>
          <thead>
            <td colspan="2" />
            <td v-for="(item, index) of month" :key="index">{{ item }}</td>
          </thead>
          <tr style="background: rgba(97, 169, 242, 0.5)">
            <td colspan="2">Array厂投片量计划</td>
            <td v-for="(item, index) of yieldInfo" :key="index">
              <input type="number" class="yield" :value="item" />
            </td>
          </tr>
        </table>
        <div class="sub-title">
          天气预报数据和调整<el-button
            class="save"
            type="primary"
            @click="setEmsWeatherInfo()"
            >保存</el-button
          >
        </div>

        <div>
          <el-date-picker
            v-model="selectWeek"
            placeholder="选择周"
            autocomplete="off"
            type="week"
            format="yyyy 第 WW 周"
            class="week-style"
            @change="changeWeek($event)"
          />
        </div>

        <table id="weather" class="weather">
          <thead>
            <td>日期</td>
            <td v-for="(item, index) of comingWeek" :key="index">{{ item }}</td>
          </thead>
          <tr>
            <td>温度</td>
            <td v-for="(item, index) of temperature" :key="index">
              <input type="number" class="temperature" :value="item" />
            </td>
          </tr>
          <tr>
            <td>最高温度</td>
            <td v-for="(item, index) of maxtemperature" :key="index">
              <input type="number" class="maxtemperature" :value="item" />
            </td>
          </tr>
          <tr>
            <td>最低温度</td>
            <td v-for="(item, index) of mintemperature" :key="index">
              <input type="number" class="mintemperature" :value="item" />
            </td>
          </tr>
          <tr>
            <td>相对湿度</td>
            <td v-for="(item, index) of humidity" :key="index">
              <input type="number" class="humidity" :value="item" />
            </td>
          </tr>
          <tr>
            <td>露点</td>
            <td v-for="(item, index) of dewpoint" :key="index">
              <input type="number" class="dewpoint" :value="item" />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import "element-ui/lib/theme-chalk/index.css";
export default {
  components: {
    MainTitle: () => import("@/components/MainTitle.vue"),
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // mainTitle: '能源监控-能源费用预算',
      runFlag: false,
      currentSystem: "elec",
      selectYear: "",
      selectWeek: "",
      month: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      EnergyPrice: [],
      weatherInfo: [],
      yieldInfo: [],
      budgetInfo: [],
      temperature: new Array(7),
      maxtemperature: new Array(7),
      mintemperature: new Array(7),
      humidity: new Array(7),
      dewpoint: new Array(7),
      elecPrice: "",
      waterPrice: "",
      gasPrice: "",
      ELlist: [],
      arraylist: [],
      centerlist: [],
      adminList: [],
      modellist: [],
      budgetlist: [],
    };
  },
  computed: {
    mainTitle() {
      return "能源监控-" + this.title;
    },
    ...mapState({
      service: (state) => state.service,
      webModel: (state) => state.authentication.webModel,
      treeTemplate: (state) => state.component.treeTemplate,
    }),
    currentYear() {
      return this.selectYear
        ? new Date(this.selectYear).getFullYear()
        : new Date().getFullYear();
    },
    paramArr() {
      const arr = [];
      const year = this.currentYear;
      for (let i = 1; i <= 12; i++) {
        let m;
        if (i < 10) {
          m = year + "-0" + i;
        } else {
          m = year + "-" + i;
        }
        arr.push(m);
      }
      return arr;
    },
    comingWeek() {
      const year = this.selectWeek
        ? new Date(this.selectWeek).getFullYear()
        : new Date().getFullYear();
      const month = this.selectWeek
        ? new Date(this.selectWeek).getMonth()
        : new Date().getMonth();
      const date = this.selectWeek
        ? new Date(this.selectWeek).getDate() - 2
        : new Date().getDate();
      var dates = [];
      const startDate = new Date(year, month, date);
      for (var i = 0; i <= 6; i++) {
        const weekItem = new Date(startDate.setDate(startDate.getDate() + 1));
        var y = weekItem.getFullYear();
        var m = weekItem.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = weekItem.getDate();
        d = d < 10 ? "0" + d : d;
        const item = y + "-" + m + "-" + d;
        dates.push(item);
      }
      return dates;
    },
    getParam() {
      return { begin_time: this.comingWeek[0], end_time: this.comingWeek[6] };
      // return { begin_time: '2020-05-19', end_time: '2020-05-25' }
    },
  },
  created() {
    this.$nextTick(() => {
      this.getEmsWeatherInfo();
      this.getEmsEnergyPrice();
      this.getEmsKpiYield();
      this.getKpiEnergyBudge("elec");
    });
  },
  methods: {
    // init(value) {
    //   this.selectYear = value
    //   console.log(value, 'value')
    // },
    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },
    changeDate(e) {
      this.getEmsEnergyPrice();
      this.getEmsKpiYield();
      this.getKpiEnergyBudge("elec");
    },
    changeWeek(e) {
      console.log(e);
      this.getEmsWeatherInfo();
    },
    async getEmsEnergyPrice() {
      try {
        const year = this.currentYear;
        const params = { begin_time: year };
        const result = await this.service.getEmsEnergyPrice(params);
        console.log(result, "asdsadsa");
        if (result.flag === false) {
          this.$notify({
            title: "价格信息数据获取出错",
            type: "error",
            duration: 2500,
          });
          return;
        }
        this.EnergyPrice = result.data;
        if (result.data) {
          const e = this.EnergyPrice.find((e) => e.energy === "elec");
          this.elecPrice = e.price + e.unit;
          const g = this.EnergyPrice.find((e) => e.energy === "gas");
          this.gasPrice = g.price + g.unit;
          const w = this.EnergyPrice.find((e) => e.energy === "water");
          this.waterPrice = w.price + w.unit;
        } else {
          this.elecPrice = "";
          this.gasPrice = "";
          this.waterPrice = "";
        }
        console.log("价格信息", result.data);
      } catch (e) {
        this.$notify({
          title: "价格信息数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async setEmsEnergyPrice() {
      try {
        if (!this.elecPrice) {
          this.$notify({
            title: "请填写电价格",
            type: "error",
            duration: 2500,
          });
          return;
        }
        if (!this.gasPrice) {
          this.$notify({
            title: "请填写气价格",
            type: "error",
            duration: 2500,
          });
          return;
        }
        if (!this.waterPrice) {
          this.$notify({
            title: "请填写水价格",
            type: "error",
            duration: 2500,
          });
          return;
        }
        const reg = /[\u4e00-\u9fa5]/g;
        if (
          !this.elecPrice.match(reg).join("") ||
          !this.gasPrice.match(reg).join("") ||
          !this.waterPrice.match(reg).join("")
        ) {
          this.$notify({
            title: "请填写单位",
            type: "error",
            duration: 2500,
          });
          return;
        }
        if (
          !parseFloat(this.elecPrice) ||
          !parseFloat(this.gasPrice) ||
          !parseFloat(this.waterPrice)
        ) {
          this.$notify({
            title: "价格格式填写错误",
            type: "error",
            duration: 2500,
          });
          return;
        }
        const year1 = this.currentYear;
        const begin_time = year1 + "-01-01";
        const year2 = this.selectYear
          ? new Date(this.selectYear).getFullYear() + 1
          : new Date().getFullYear() + 1;
        const end_time = year2 + "-01-01";
        const params = [
          {
            unit: this.elecPrice.match(reg).join(""),
            price: parseFloat(this.elecPrice),
            energy: "elec",
            end_time: end_time,
            begin_time: begin_time,
          },
          {
            unit: this.gasPrice.match(reg).join(""),
            price: parseFloat(this.gasPrice),
            energy: "gas",
            end_time: end_time,
            begin_time: begin_time,
          },
          {
            unit: this.waterPrice.match(reg).join(""),
            price: parseFloat(this.waterPrice),
            energy: "water",
            end_time: end_time,
            begin_time: begin_time,
          },
        ];

        const result = await this.service.setEmsEnergyPrice(...params);
        if (result.flag === true) {
          this.$notify({
            title: "价格信息数据保存成功",
            type: "success",
            duration: 2500,
          });
        } else {
          this.$notify({
            title: "价格信息数据保存失败",
            type: "error",
            duration: 2500,
          });
          return;
        }
        // this.EnergyPrice = result.data
        console.log("价格信息", result.data);
      } catch (e) {
        this.$notify({
          title: "价格信息数据保存出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getKpiEnergyBudge(energy) {
      try {
        this.runFlag = true;
        this.currentSystem = energy;
        const year1 = this.currentYear;
        const begin_time = year1 + "-01-01";
        const year2 = this.selectYear
          ? new Date(this.selectYear).getFullYear() + 1
          : new Date().getFullYear() + 1;
        const end_time = year2 + "-01-01";
        const param = {
          begin_time: begin_time,
          end_time: end_time,
          energy: energy,
        };
        const result = await this.service.getKpiEnergyBudge(param);
        if (result.flag === false) {
          this.$notify({
            title: "能源预算信息数据获取出错",
            type: "error",
            duration: 2500,
          });
          this.runFlag = false;
          return;
        }
        this.budgetInfo = result.data;
        console.log("能源预算信息", this.budgetInfo);
        if (!this.budgetInfo) {
          this.arraylist = new Array(12);
          this.ELlist = new Array(12);
          this.modellist = new Array(12);
          this.centerlist = new Array(12);
          this.adminList = new Array(12);
          this.budgetlist = new Array(12);
          this.runFlag = false;
          return;
        }
        const arrayInfo = result.data.filter((e) => e.dept_sub === "Array厂");
        const ELInfo = result.data.filter((e) => e.dept_sub === "EL厂");
        const modelInfo = result.data.filter((e) => e.dept_sub === "模组厂");
        const centerInfo = result.data.filter((e) => e.dept_sub === "开发中心");
        const adminInfo = result.data.filter((e) => e.dept_sub === "生活");
        console.log("centerInfo", centerInfo);

        const arraylist = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = arrayInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            arraylist[i] = item.budget_percent;
          }
        }
        this.arraylist = arraylist;

        const ELlist = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = ELInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            ELlist[i] = item.budget_percent;
          }
        }
        this.ELlist = ELlist;

        const modellist = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = modelInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            modellist[i] = item.budget_percent;
          }
        }
        this.modellist = modellist;

        const centerlist = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = centerInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            centerlist[i] = item.budget_percent;
          }
        }
        this.centerlist = centerlist;

        const adminList = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = adminInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            adminList[i] = item.budget_percent;
          }
        }
        this.adminList = adminList;

        const budgetlist = new Array(12);
        for (let i = 0; i < 12; i++) {
          const item = arrayInfo.find(
            (e) => e.time.slice(0, 7) === this.paramArr[i]
          );
          if (item) {
            budgetlist[i] = item.budget_total;
          }
        }
        this.budgetlist = budgetlist;
        this.runFlag = false;
      } catch (e) {
        this.runFlag = false;
        this.$notify({
          title: "能源预算信息数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async setKpiEnergyBudge() {
      try {
        const params = [];
        const budg = document.getElementsByClassName("budg");
        const arr = document.getElementsByClassName("arr");
        const EL = document.getElementsByClassName("EL");
        const model = document.getElementsByClassName("model");
        const center = document.getElementsByClassName("center");
        const admin = document.getElementsByClassName("admin");
        let obj = {};
        budg.forEach((item, index) => {
          if (
            (Number(arr[index].value) * 1000 +
              Number(EL[index].value) * 1000 +
              Number(model[index].value) * 1000 +
              Number(center[index].value) * 1000 +
              Number(admin[index].value) * 1000) /
              1000 !==
            100
          ) {
            console.log(
              "sum",
              (Number(arr[index].value) * 1000 +
                Number(EL[index].value) * 1000 +
                Number(model[index].value) * 1000 +
                Number(center[index].value) * 1000 +
                Number(admin[index].value) * 1000) /
                1000
            );
            throw new Error("ending");
          }
          obj = [
            {
              time: this.paramArr[index],
              energy: this.currentSystem,
              dept: "制程",
              dept_id: "prod",
              dept_sub: "Array厂",
              dept_sub_id: null,
              budget_total: budg[index].value ? budg[index].value : null,
              budget_percent: arr[index].value ? arr[index].value : null,
            },
            {
              time: this.paramArr[index],
              energy: this.currentSystem,
              dept: "制程",
              dept_id: "prod",
              dept_sub: "EL厂",
              dept_sub_id: null,
              budget_total: budg[index].value ? budg[index].value : null,
              budget_percent: EL[index].value ? EL[index].value : null,
            },
            {
              time: this.paramArr[index],
              energy: this.currentSystem,
              dept: "制程",
              dept_id: "prod",
              dept_sub: "模组厂",
              dept_sub_id: null,
              budget_total: budg[index].value ? budg[index].value : null,
              budget_percent: model[index].value ? model[index].value : null,
            },
            {
              time: this.paramArr[index],
              energy: this.currentSystem,
              dept: "动力",
              dept_id: "cub",
              dept_sub: "开发中心",
              dept_sub_id: null,
              budget_total: budg[index].value ? budg[index].value : null,
              budget_percent: center[index].value ? center[index].value : null,
            },
            {
              time: this.paramArr[index],
              energy: this.currentSystem,
              dept: "生活",
              dept_id: "admin",
              dept_sub: "生活",
              dept_sub_id: null,
              budget_total: budg[index].value ? budg[index].value : null,
              budget_percent: admin[index].value ? admin[index].value : null,
            },
          ];
          params.push(...obj);
        });
        console.log("params", params);
        const result = await this.service.setKpiEnergyBudge(...params);
        console.log(result)
        if (result.flag === true) {
          this.$notify({
            title: "能源预算信息数据保存成功",
            type: "success",
            duration: 2500,
          });
        } else {
          this.$notify({
            title: "能源预算信息数据保存失败",
            type: "error",
            duration: 2500,
          });
          return;
        }
        // this.EnergyPrice = result.data
        console.log("不走catch");
      } catch (e) {
        console.log("走catch");
        if (e.message === "ending") {
          this.$notify({
            title: "(每列)预算占比的和应该为100%",
            type: "error",
            duration: 2500,
          });
        } else {
          this.$notify({
            title: "能源预算信息数据保存失败",
            type: "error",
            duration: 2500,
          });
        }
      }
    },
    async getEmsKpiYield() {
      try {
        const Param = {
          begin_time: "2020-01-01",
          end_time: "2020-12-31",
          id: "array",
        };
        const result = await this.service.getEmsKpiYield(Param);
        if (result.flag === false) {
          this.$notify({
            title: "产能目标信息数据获取出错",
            type: "error",
            duration: 2500,
          });
          return;
        }
        const yieldInfo = result.data[0].value;
        console.log("产能目标信息", yieldInfo);
        const yie = new Array(12);
        for (let i = 0; i < 12; i++) {
          const ind = this.paramArr[i];
          yie[i] = yieldInfo[ind];
        }
        this.yieldInfo = yie;
      } catch (e) {
        this.$notify({
          title: "产能目标信息数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async setEmsKpiYield() {
      try {
        const yieldValues = document.getElementsByClassName("yield");
        const paramObj = this.transformObject(this.paramArr, yieldValues);
        // for (let i = 0; i < this.paramArr; i++) {
        //   paramObj[this.paramArr[i]] = yieldValues[i]
        // }
        const params = { id: "array", value: paramObj };
        console.log(params, this.paramArr);
        const result = await this.service.setEmsKpiYield(params);
        if (result.flag === true) {
          this.$notify({
            title: "产能目标信息数据保存成功",
            type: "success",
            duration: 2500,
          });
        } else {
          this.$notify({
            title: "产能目标信息数据保存失败",
            type: "error",
            duration: 2500,
          });
          return;
        }
        // this.EnergyPrice = result.data
        console.log("价格信息", result.data);
      } catch (e) {
        this.$notify({
          title: "价格信息数据保存出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async getEmsWeatherInfo() {
      try {
        const result = await this.service.getEmsWeatherInfo(this.getParam);
        if (result.flag === false) {
          this.$notify({
            title: "天气信息数据获取出错1",
            type: "error",
            duration: 2500,
          });
          return;
        }
        this.weatherInfo = result.data;
        if (!this.weatherInfo) {
          this.temperature = new Array(7);
          this.maxtemperature = new Array(7);
          this.mintemperature = new Array(7);
          this.humidity = new Array(7);
          this.dewpoint = new Array(7);
          return;
        }
        console.log("天气信息", this.weatherInfo);
        const temperature = new Array(7);
        const maxtemperature = new Array(7);
        const mintemperature = new Array(7);
        const humidity = new Array(7);
        const dewpoint = new Array(7);
        for (let i = 0; i < this.comingWeek.length; i++) {
          const item = this.weatherInfo.find(
            (e) => e.time === this.comingWeek[i]
          );
          if (item) {
            temperature[i] = item.temperature;
            maxtemperature[i] = item.maxtemperature;
            mintemperature[i] = item.mintemperature;
            humidity[i] = item.humidity;
            dewpoint[i] = item.dewpoint;
          }
        }
        this.temperature = temperature;
        this.maxtemperature = maxtemperature;
        this.mintemperature = mintemperature;
        this.humidity = humidity;
        this.dewpoint = dewpoint;
        console.log(
          temperature,
          maxtemperature,
          mintemperature,
          humidity,
          dewpoint
        );
      } catch (e) {
        this.$notify({
          title: "天气信息数据获取出错",
          type: "error",
          duration: 2500,
        });
      }
    },
    async setEmsWeatherInfo() {
      try {
        const params = [];
        const tem = document.getElementsByClassName("temperature");
        const max = document.getElementsByClassName("maxtemperature");
        const min = document.getElementsByClassName("mintemperature");
        const hum = document.getElementsByClassName("humidity");
        const dewp = document.getElementsByClassName("dewpoint");
        let obj = {};
        tem.forEach((item, index) => {
          obj = {
            time: this.comingWeek[index],
            temperature: item.value,
            maxtemperature: max[index].value,
            mintemperature: min[index].value,
            humidity: hum[index].value,
            dewpoint: dewp[index].value,
          };
          params.push(obj);
        });
        const result = await this.service.setEmsWeatherInfo(...params);
        if (result.flag === true) {
          this.$notify({
            title: "天气信息数据保存成功",
            type: "success",
            duration: 2500,
          });
        } else {
          this.$notify({
            title: "天气信息数据保存失败",
            type: "error",
            duration: 2500,
          });
          return;
        }
      } catch (e) {
        this.$notify({
          title: "天气信息数据保存失败",
          type: "error",
          duration: 2500,
        });
      }
    },
    transformObject(keyArr, valueArr) {
      var obj = {};
      keyArr.map((v, i) => {
        obj[keyArr[i]] = valueArr[i].value;
      });
      return obj;
    },
    getTableContent() {
      const temperature = new Array(7);
      const maxtemperature = new Array(7);
      const mintemperature = new Array(7);
      const humidity = new Array(7);
      const dewpoint = new Array(7);
      for (let i = 0; i < this.comingWeek.length; i++) {
        const item = this.weatherInfo.find(
          (e) => e.time === this.comingWeek[i]
        );
        if (item) {
          temperature[i] = item.temperature;
          maxtemperature[i] = item.maxtemperature;
          mintemperature[i] = item.mintemperature;
          humidity[i] = item.humidity;
          dewpoint[i] = item.dewpoint;
        }
      }
      this.temperature = temperature;
      this.maxtemperature = maxtemperature;
      this.mintemperature = mintemperature;
      this.humidity = humidity;
      this.dewpoint = dewpoint;
      console.log(
        temperature,
        maxtemperature,
        mintemperature,
        humidity,
        dewpoint
      );
    },
  },
};
</script>

<style lang = "scss" scoped>
.mainbody {
  height: 100vh;
  background: url("~@assets/report/bg.png") no-repeat;
  background-size: 100% 100%;
}
.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba($color: #333, $alpha: 0.7);
  z-index: 9;
}
.container {
  position: relative;
  width: 92%;
  height: 100%;
  margin: 0 auto;
}
.main-frame {
  width: 100%;
  height: 82%;
  overflow-y: scroll;
  display: flex;
  flex-flow: column;
  margin-top: 1rem;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sub-title {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  font-weight: 600;
  height: 3.5rem;
  line-height: 3.5rem;
  padding: 0 1rem;
  margin: 1rem 0;
  background: rgba(1, 121, 197, 0.3);
}
.price {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.price-item {
  display: flex;
  align-content: space-around;
  margin-right: 5rem;
  border: 2px solid #4d5e72;
  background: #071f3b;
}
.price-name {
  padding: 0.5rem 1.5rem;
  font-size: 1.4rem;
  border-right: 1px solid #4d5e72;
}
.price-value {
  padding: 0.5rem 1.5rem;
  font-size: 1.4rem;
}
.price-value input {
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  color: #fff;
}
.year-style {
  position: absolute;
  left: 0;
  top: 2.5%;
  width: 13rem;
  height: 3rem;
  padding: 0;
}
.week-style {
  width: 15rem;
  height: 3rem;
  padding: 0;
  margin-bottom: 1rem;
}

.save {
  width: 6rem;
  height: 3rem;
  color: white;
  align-self: center;
  background-color: #569fe9;
  border: 0;
  border-radius: 0;
  font-size: 1.2rem;
  padding: 0;
}
.button-group {
  flex: 0;
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  .system-button {
    width: 6rem;
    color: white;
    align-self: center;
    background-color: #569fe9;
    border: 0;
    border-radius: 0;
    padding: 1rem;
  }
}
.system-button-selected {
  background-color: #05417f !important;
}
table {
  width: 100%;
  font-size: 1.3rem;
  thead {
    font-weight: 600;
    background: rgba($color: #125da8, $alpha: 0.5);
  }
  td {
    padding: 1rem;
    text-align: center;
    white-space: nowrap;
  }
}
td input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  text-align: center;
  width: 90%;
}
.weather tr {
  background: rgba(97, 169, 242, 0.5);
}
</style>
<style lang="scss">
.el-input--prefix .el-input__inner {
  height: 3.5rem;
  color: white;
  background-color: #05417f !important;
  border: 1px solid !important;
  border-color: #00a8ff !important;
  border-radius: 0;
}
//去掉type=number时，右边的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>
